<template>
  <a-form-model
          class="advancedSettings group-bargaining-form"
          ref="ruleForm"
          :model="formData"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 15 }">
    <a-form-model-item label="中奖弹窗效果图" prop="lotteryImage">
      <a-radio-group v-model="formData.lotteryImage">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="sys-img" v-show="formData.lotteryImage === '1'"></div>
      <div class="upload-box" v-show="formData.lotteryImage === '2'">
        <upload-image class="img" v-model="formData.lotteryLoadImage"></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br>
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(1)"> 素材库选择 </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="未中奖弹窗效果图" prop="noLotteryImage">
      <a-radio-group v-model="formData.noLotteryImage">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="sys-img" v-show="formData.noLotteryImage === '1'"></div>
      <div class="upload-box" v-show="formData.noLotteryImage === '2'">
        <upload-image class="img" v-model="formData.noLotteryLoadImage"></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br>
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(2)"> 素材库选择 </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="积分展示图" prop="noLotteryImage">
      <a-radio-group v-model="formData.integralImage">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="sys-img" v-show="formData.integralImage === '1'"></div>
      <div class="upload-box" v-show="formData.integralImage === '2'">
        <upload-image class="img" v-model="formData.integralLoadImage"></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br>
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(3)"> 素材库选择 </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="优惠券展示图" prop="lotteryImage">
      <a-radio-group v-model="formData.couponImage">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="sys-img" v-show="formData.couponImage === '1'"></div>
      <div class="upload-box" v-show="formData.couponImage === '2'">
        <upload-image class="img" v-model="formData.couponLoadImage"></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br>
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(4)"> 素材库选择 </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="分享样式" prop="lotteryImage">
      <a-radio-group v-model="formData.shareImage">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="文案" prop="copywriting">
      <a-input allow-clear
               style="width: 400px"
               v-model="formData.copywriting"
               placeholder="输入文案，限1-15字，不输入不展示" />
    </a-form-model-item>
    <a-form-model-item label="海报图" prop="posterImage">
      <div class="sys-img" v-show="formData.shareImage === '1'"></div>
      <div class="upload-box" v-show="formData.shareImage === '2'">
        <upload-image class="img" v-model="formData.posterImage"></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br>
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(5)"> 素材库选择 </a-button>
        </div>
      </div>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
  export default {
    name: "advancedSettings",
    data() {
      return {
        formData: {
          lotteryImage: '1',
          lotteryLoadImage: '',
          noLotteryImage: '1',
          noLotteryLoadImage: '',
          integralImage: '1',
          integralLoadImage: '',
          couponImage: '1',
          couponLoadImage: '',
          shareImage: '1',
          copywriting: '',
          posterImage: '',
        }
      }
    },
    methods: {
      selectFromLibrary(type) {
        switch (type) {
          case 1:
            this.$message.info('中奖弹窗效果图-素材库选择');
            break;
          case 2:
            this.$message.info('未中奖弹窗效果图-素材库选择');
            break;
          case 3:
            this.$message.info('积分展示图-素材库选择');
            break;
          case 4:
            this.$message.info('优惠券展示图-素材库选择');
            break;
          default:
            this.$message.info('海报图-素材库选择');
        }
      }
    }
  }
</script>

<style scoped lang="less">
.advancedSettings{
  .upload-box{
    display: flex;
    .img{
      margin-right: 12px;
    }
    .library-select{
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
  .sys-img{
    width: 80px;
    height: 70px;
    background-image: url("");
    background-repeat: no-repeat;
  }
}
</style>
